<template>
  <div class="airSearch">
    <div class="tabs">
      <span
        v-for="(item,index) in tabs"
        :key="index"
        :class="{active:index == currentTab}"
        @click="handleChange(index)"
      >
        <i :class="item.icon"></i>
        {{item.name}}
      </span>
    </div>
    <el-form ref="form" :model="airFome" label-width="80px">
      <el-form-item label="出发城市">
        <el-autocomplete
          v-model="airFome.departCity"
          placeholder="请搜索出发城市"
          :fetch-suggestions="querydepartSearch"
          @select="handledepartSelect"
          style="width: 100%;"
          :trigger-on-focus="false"
          :highlight-first-item="true"
        ></el-autocomplete>
      </el-form-item>
      <el-form-item label="到达城市">
        <el-autocomplete
          v-model="airFome.destCity"
          placeholder="请输入到达城市"
          :fetch-suggestions="querydestSearch"
          @select="handledestSelect"
          style="width: 100%;"
          :trigger-on-focus="false"
          :highlight-first-item="true"
        ></el-autocomplete>
      </el-form-item>
      <el-form-item label="出发时间">
        <el-date-picker
          v-model="airFome.departDate"
          type="date"
          placeholder="选择日期"
          style="width: 100%;"
          @change="handleDate"
          :picker-options="pickerOptions"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          style="width: 100%;"
          @click="handleSubmit"
        >搜索</el-button>
      </el-form-item>
      <div class="reverse" @click="reverse">
        <span>换</span>
      </div>
    </el-form>
  </div>
</template>

<script>
import moment from "moment";
export default {
  data() {
    return {
      tabs: [
        {
          icon: "iconfont icon-dancheng",
          name: "单程"
        },
        {
          icon: "iconfont icon-wangfan",
          name: "往返"
        }
      ],
      currentTab: 0,
      airFome: {
        departCity: "",
        departCode: "",
        destCity: "",
        destCode: "",
        departDate: ""
      },
      //禁用之前日期选择
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        }
      }
    };
  },
  methods: {
    //tab栏切换
    handleChange(index) {
      // this.currentTab = index;
      if (index == 1) {
        this.$alert("目前暂不支持往返，请使用单程选票！", "提示", {
          confirmButtonText: "确定",
          type: "warning"
        });
      }
    },
    //获取搜索的城市
    getCity(val) {
      return this.$axios({
        url: "/airs/city",
        params: {
          name: val
        }
      }).then(res => {
        var result = res.data.data.map(item => {
          return {
            value: item.name.replace(/市$/, ""),
            code: item.sort
          };
        });
        return result.filter(item => item.code);
      });
    },
    //出发城市搜索结果
    querydepartSearch(val, callback) {
      this.getCity(val).then(res => {
        if (res.length > 0) {
          this.airFome.departCode = res[0].code;
        }
        callback(res);
      });
    },
    //到达城市搜索结果
    querydestSearch(val, callback) {
      this.getCity(val).then(res => {
        if (res.length > 0) {
          this.airFome.destCode = res[0].code;
        }
        callback(res);
      });
    },
    //出发城市选中
    handledepartSelect(val) {
      this.airFome.departCode = val.code;
    },
    //到达城市选中
    handledestSelect(val) {
      this.airFome.destCode = val.code;
    },
    //选择时间
    handleDate(val) {
      this.airFome.departDate = moment(val).format("YYYY-MM-DD");
    },
    //交换
    reverse() {
      var tempCity = this.airFome.departCity;
      this.airFome.departCity = this.airFome.destCity;
      this.airFome.destCity = tempCity;
      var tempCode = this.airFome.departCode;
      this.airFome.departCode = this.airFome.destCode;
      this.airFome.destCode = tempCode;
    },
    //查询
    handleSubmit() {
      //不为空处理
      switch (true) {
        case !this.airFome.departCity.trim():
          this.$message.error("请输入出发城市");
          return;
        case !this.airFome.departCode.trim():
          this.$message.error("请输入正确的出发城市");
          return;
        case !this.airFome.destCity.trim():
          this.$message.error("请输入到达城市");
          return;
        case !this.airFome.destCode.trim():
          this.$message.error("请输入正确的到达城市");
          return;
        case !this.airFome.departDate:
          this.$message.error("请选择时间");
          return;
      }
      var query = {
        departCity: this.airFome.departCity.replace(/市$/, ""),
        departCode: this.airFome.departCode,
        destCity: this.airFome.destCity.replace(/市$/, ""),
        destCode: this.airFome.destCode,
        departDate: this.airFome.departDate
      };
      //保存历史记录
      this.$store.commit("history/setHistory", query);

      this.$router.push({
        path: "/air/flights",
        query
      });
    }
  }
};
</script>

<style lang="less" scoped>
.airSearch {
  width: 360px;
  height: 350px;
  margin-right: 20px;
  border: 1px solid #ddd;
  border-top: none;
  .tabs {
    display: flex;
    span {
      flex: 1;
      height: 48px;
      line-height: 48px;
      text-align: center;
      background: #eee;
      border-top: 3px solid #eee;
      cursor: pointer;
      i {
        font-size: 16px;
        margin-right: 5px;
      }
      &.active {
        background: #fff;
        border-top-color: #ffa500;
      }
    }
  }
  .el-form {
    padding: 15px 50px 15px 15px;
    position: relative;
    .reverse {
      position: absolute;
      top: 55px;
      right: 15px;
      &::before,
      &::after {
        content: "";
        display: block;
        position: absolute;
        left: -13px;
        width: 24px;
        height: 1px;
        background: #ccc;
      }
      &::before {
        top: -20px;
      }
      &::after {
        bottom: -20px;
      }
      span {
        position: relative;
        display: block;
        width: 22px;
        height: 22px;
        line-height: 22px;
        text-align: center;
        font-size: 12px;
        border-radius: 2px;
        background: #999;
        color: #fff;
        cursor: pointer;
        &::before,
        &::after {
          content: "";
          width: 1px;
          height: 20px;
          display: block;
          background: #ccc;
          position: absolute;
          left: 10px;
        }
        &::before {
          top: -20px;
        }
        &::after {
          bottom: -20px;
        }
      }
    }
  }
}
</style>